<template>
  <el-dialog :title="isEdit ? '编辑考勤' : '考勤补录'" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="120px" :rules="formRules" status-icon>
        <div class="formDiv">
          <div class="divOne">
            <el-form-item label="员工编号" prop="code">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="formData.departmentName" placeholder="请选择" @change="dptChangeHandler">
                <el-option v-for="item in dptList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工种">
              <el-select v-model="formData.workType" placeholder="请选择">
                <el-option v-for="item in workList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="RFID卡号" prop="rfid">
              <el-input v-model="formData.rfid"></el-input>
            </el-form-item>
            <el-form-item label="考勤日期" prop="EnterTime">
              <el-date-picker v-model="formData.attendanceDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="进场时间" prop="EnterTime">
              <el-time-picker v-model="formData.EnterTime" value-format="HH:mm" format="HH:mm:ss" placeholder="选择日期" @change="dateHandle"></el-time-picker>
            </el-form-item>
            <el-form-item label="出场时间" prop="LeaveTime">
              <el-time-picker v-model="formData.LeaveTime" value-format="HH:mm" format="HH:mm:ss" placeholder="选择日期"></el-time-picker>
            </el-form-item>
          </div>
          <div class="divTwo">
            <el-form-item label="员工名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-select v-model="formData.jobName" placeholder="请选择">
                <el-option v-for="item in jobList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考勤方式" prop="AttendanceType">
              <el-select v-model="formData.AttendanceType" placeholder="请选择考勤方式">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门禁卡号" prop="accessCardID">
              <el-input v-model="formData.accessCardID"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="备注" prop="number">
          <el-input v-model="formData.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { department, job, work, employee, attendanceList } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        formData: {
          attendanceDate: '',
          EmployeeId: '',
          departmentName: '',
          jobName: '',
          workType: '',
          name: '',
          code: '',
          accessCardID: '',
          rfid: '',
          AttendanceType: '',
          EnterTime: '',
          LeaveTime: '',
          remark: ''
        },
        options: [
          { label: '门禁', value: '门禁' },
          { label: '基站', value: '基站' },
          { label: '门禁 + 基站', value: '门禁 + 基站' }
        ],
        // 部门数据
        dptList: [],
        // 职位数据
        jobList: [],
        // 工种数据
        workList: [],
        formRules: {
          code: [{ required: true, message: '请输入员工编码', trigger: 'blur' }],
          AttendanceType: [{ required: true, message: '请选择考勤方式', trigger: 'change' }],
          EnterTime: [{ required: true, message: '请选择进场时间', trigger: 'change' }],
          LeaveTime: [{ required: true, message: '请选择出场时间', trigger: 'change' }]
        }
      }
    },
    methods: {
      dateHandle(value) {
       
      },
      resetFormData() {
        this.formData = {
          attendanceDate: '',
          EmployeeId: '',
          id: '',
          departmentName: '',
          jobName: '',
          workType: '',
          name: '',
          code: '',
          accessCardID: '',
          rfid: '',
          AttendanceType: '',
          EnterTime: '',
          LeaveTime: '',
          remark: ''
        }
      },
      // 部门改变事件
      async dptChangeHandler(event) {
        // this.formData.job.id = ''
        // // 职位
        // this.jobList = []
        // try {
        //   let obj = { pageIndex: 1, pageSize: 1e8 }
        //   let result = await job('post', obj, false)
        //   result.data.items.map(item => {
        //     if (item.lenght === 0) {
        //       return
        //     } else {
        //       if (item.department.id === event) {
        //         this.jobList.push({
        //           label: item.jobTitle,
        //           value: item.id
        //         })
        //       }
        //     }
        //   })
        // } catch (err) {
        //   this.$message.error('数据查询失败！')
        // }
      },
      async openTwo(value) {
        this.resetFormData()
        this.row = value.row
        this.apiKey = value.apiKey
        this.dialogVisible = true
        this.isEdit = true
        let res = await attendanceList('get', { id: value.id, value: null }, true)
        let data = JSON.parse(JSON.stringify(res.data))
        this.formData.attendanceDate = data.attendanceDate
        this.formData.departmentName = data.departmentName
        this.formData.workType = data.workType
        this.formData.jobName = data.jobName
        this.formData.code = data.code
        this.formData.EmployeeId = data.employeeId
        this.formData.id = data.id
        this.formData.name = data.name
        this.formData.accessCardID = data.accessCardID
        this.formData.rfid = data.rfid
        this.formData.AttendanceType = data.attendanceType
        this.formData.EnterTime = data.entertime
        this.formData.LeaveTime = data.leaveTime
        this.formData.remark = data.remark
        this.$refs.RefForm.clearValidate()
      },
      // 员工编号输入失去焦点
      async EmployeeIdBlur() {
        try {
          if (!this.formData.EmployeeId) {
            return
          }
          let obj = {
            pageIndex: '1',
            search: [
              {
                key: 'employeeCode',
                value: this.formData.EmployeeId,
                operation: 0
              }
            ]
          }
          const {
            data: { items: resData, count, pageIndex }
          } = await employee('post', obj, false)
          this.formData.id = resData[0].department ? resData[0].id : ''
          this.formData.department.id = resData[0].department ? resData[0].department.id : ''
          this.formData.job.id = resData[0].job ? resData[0].job.id : ''
          this.formData.work.id = resData[0].work ? resData[0].work.id : ''
          this.formData.name = resData[0].name
          this.formData.accessCardID = resData[0].accessCardID
          this.formData.rfid = resData[0].rfid
        } catch (err) {
          this.$message.warning('无此员工，请核实后输入！')
        }
      },
      // 部门
      async dptHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await department('post', obj, false)
          if (res.code === 200) {
            // this.dptList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.dptList = []
            res.data.items.forEach(item => {
              this.dptList.push({
                label: item.deptName,
                value: item.deptName
              })
            })
          }
        } catch (err) {
          this.dptList = []
        }
      },
      // 工种
      async workHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await work('post', obj, false)
          if (res.code === 200) {
            // this.workList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.workList = []
            res.data.items.map(item => {
              this.workList.push({
                label: item.workName,
                value: item.workName
              })
            })
          }
        } catch (err) {
          this.workList = []
        }
      },
      // 职位
      async jobHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await job('post', obj, false)
          if (res.code === 200) {
            // this.jobList = [{
            //   label: '空',
            //   value: null
            // }]
            this.jobList = []
            res.data.items.map(item => {
              this.jobList.push({
                label: item.jobTitle,
                value: item.jobTitle
              })
            })
          }
        } catch (err) {
          this.jobList = []
        }
      },
      async getDepartmentList() {
        await this.jobHandler()
        await this.dptHandler()
        await this.workHandler()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .formDiv {
    display: flex;
    .divOne {
      flex: 1;
    }
    .divTwo {
      flex: 1;
    }
  }
  .el-select {
    width: 100%;
  }
  /deep/.el-date-picker {
    width: 100%;
  }
</style>
